<template>

	<view class="page">
		<u-navbar title="任务签到" bgColor="rgba(255,255,255,0)"></u-navbar>

		<image class="imgs1" src="../../static/qiandao/qiandaodeli.png" mode=""></image>
		<image class="imgs2" src="../../static/qiandao/wanchengrenwu.png" mode=""></image>
		<!--资产 -->
<!-- 		<view class="img_box">
			<image class="imgs3" src="../../static/qiandao/toubu.png" mode="">
			</image>
			<view class="img_box1">

				<image class="img_box1_img" src="../../static/qiandao/mycoin.png" mode=""></image>


				<view class="img_box1_title">
					我的资产
				</view>
			</view>
		</view> -->


<!-- 		<view class="zichan">
			<view class="zichan_img_box">
				<image class="zichan_img" src="../../static/qiandao/qiandaobeijing2.png" mode=""></image>
				<view class="zichan_img_box_box1">

					<view class="zichan_img_box_box1_title1">
						积分
					</view>
					<view class="zichan_img_box_box1_title2">
						{{this.commissionAble}}
					</view>
				</view>
			</view>

		</view> -->

		<!-- <image class="imgs4" src="../../static/qiandao/dibu.png" mode=""></image> -->
		<view class="img_box" style="margin-top: 20rpx;">
			<image class="imgs3" src="../../static/qiandao/toubu.png" mode="">
			</image>
			<view class="img_box1">

				<image class="img_box1_img" src="../../static/qiandao/meirirenwyu2.png" mode=""></image>


				<view class="img_box1_title">
					每日任务
				</view>
			</view>
			<!-- <view class="img_box1">
			
				<image class="img_box1_img" src="../../static/qiandao/icon-每日任务@2x.png" mode=""></image>
			
			
				<view class="img_box1_title">
					每日任务
				</view>
			</view> -->
		</view>
		<view class="zichan" style="height: 700rpx;">
			<view class="zichan_box" v-for="(item,index) in residueSeeTimes">
				<view class="zichan_box_left">
					观看第{{index + 1}}条视频
				</view>
				<ad-rewarded-video adpid="1078387137" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
					<image class="zichan_box_right" src="../../static/qiandao/Frame 4087@2x (1).png" mode="" :disabled="loading" :loading="loading" ></image>
				</ad-rewarded-video>
			</view>
			<view class="zichan_box" v-for="(item,index) in seeTimes">
			
				<view class="zichan_box_left">
					视频已观看
				</view>
				
				<image class="zichan_box_right" src="../../static/qiandao/Frame 4087@2x.png" mode=""></image>
			</view>
		</view>
		<image class="imgs4" src="../../static/qiandao/dibu.png" mode=""></image>
	</view>
	


</template>

<script>
import { log } from 'mathjs';
	export default {
		data() {
			return {
				careerInfo: {},
				userId: null,
				seeTimes: null,
				residueSeeTimes: null,
				commissionAble: null,
			};
		},
		onLoad(){
			this.getcareerInfo();
		},
		onShow() {
		 	// 在页面显示时检查是否需要刷新页面
			const pages = getCurrentPages();
			 // 获取当前页面栈的长度，如果大于1，则说明是从其他页面返回的
			if (pages.length > 1) {
			    this.getcareerInfo();
				console.log("页面刷新");
			}
		},
		methods:{
			onadload(e) {
			  console.log('广告数据加载成功');
			},
			onadclose(e) {
			  const detail = e.detail
			  // 用户点击了【关闭广告】按钮
			  if (detail && detail.isEnded) {
			    // 正常播放结束
			    console.log("onadclose " + detail.isEnded);
				this.$http.post('/advertisement?userId=' + this.userId).then(res => {
					if (res && res.code == 200) {
						uni.reLaunch({ url: '/pages/qiandao/qiandao' })
					}
				})
			  } else {
			    // 播放中途退出
			    console.log("onadclose " + detail.isEnded);
			  }
			},
			onaderror(e) {
			  // 广告加载失败
			  console.log("onaderror: ", e.detail);
			  // 建议保留该toast以便调试
			  uni.showToast({
			  	title: e.detail
			  })
			},
			getcareerInfo() {
				this.$http.get('/account/operating/center/info').then(res => {
					if (res && res.code == 200) {
						this.userId = res.data.id;
						this.commissionAble = res.data.commission_able;
						this.$http.get('/advertisement/times?userId=' + this.userId).then(res => {
							if (res && res.code == 200) {
								this.seeTimes = res.data.seeTimes;
								this.residueSeeTimes = res.data.residueSeeTimes;
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 120vh;

		background-image: url(/static/qiandao/qiandao2.png);
		background-size: contain;

		.imgs1 {
			margin: 39rpx 39rpx 0 39rpx;
			width: 350rpx;
			height: 89rpx;
		}

		.imgs2 {
			margin: 30rpx 39rpx 69rpx 39rpx;
			width: 50%;
			height: 50rpx;
		}

		.img_box {
			position: relative;
			height: 104rpx;

			.imgs3 {
				width: calc(100% - 78rpx);
				height: 104rpx;
				margin: 0 39rpx;


			}

			.img_box1 {
				// margin-top: 39rpx;
				position: absolute;
				top: 29rpx;
				left: 78rpx;
				display: flex;
				align-items: center;

				// background-color: springgreen;. 
				// .img_box1_box1{
				// 	margin: 0 23rpx;
				// }
				.img_box1_img {
					width: 38rpx;
					height: 38rpx;
				}

				.img_box1_title {
					// width: 123rpx;
					// height: 31rpx;
					color: #FF82A0;
					font-weight: 600;
					font-size: 31rpx;
					line-height: 31rpx;
					text-align: center;

					margin-left: 10rpx;
				}

			}
		}

		.zichan {
			box-sizing: border-box;
			margin: 0 39rpx;
			height: 127rpx;
			width: calc(100% - 78rpx);
			background: #FFFFFF;

			// background-color: paleturquoise;
			.zichan_img_box {
				margin: 0 39rpx;
				position: relative;

				.zichan_img {
					// width: 640rpx;
					width: 100%;
					// width: calc(100% - 23rpx);
					margin: 0 23rpx;
					height: 126rpx;
					margin: 0 auto;

				}

				.zichan_img_box_box1 {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					padding: 23rpx 0 0 42rpx;

					.zichan_img_box_box1_title1 {
						font-size: 27rpx;
						color: #FFFFFF;
					}

					.zichan_img_box_box1_title2 {
						font-size: 38rpx;
						color: #FFFFFF;
					}
				}
			}




		}

		.imgs4 {
			width: calc(100% - 78rpx);
			height: 65rpx;
			margin: 0 39rpx;
		}

		.zichan_box {
			box-sizing: border-box;
			margin: 0 39rpx 10rpx 39rpx;
			padding: 0 38rpx;
			width: calc(100% - 78rpx);
			background: #FFF9F4;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.zichan_box_left {
				font-size: 31rpx;color: #000000;width: 400rpx;
				
			}
			.zichan_box_right{
				width:126rpx ;
				height: 58rpx;
			}
		}

	}
</style>